<template>
  	<view class='code'>
      <!-- #ifdef MP-WEIXIN -->
      <top-nav title="登录"></top-nav>
      <!-- #endif -->
      				<view>
      					<u-navbar :autoBack="true"></u-navbar>
      				</view>
      				<view class='code-main'>
      					<view class='code-msg'>输入6位验证码</view>
      					<view class='code-time'>
      						<view>验证码已发送至 {{phone|formatPhone}}</view>
      						<view v-show="count != 0">{{count}}s后重发</view>
      					</view>
                <view class="refresh" v-show="count == 0" @click="Countdown">
                  收不到验证码?点击重新发送
                </view>
      					<view class='code-num' >
      						<u-code-input v-model="value3" :maxlength="6" :focus="true" @finish="finishInput"></u-code-input>
      					</view>
      				</view>
          
    </view>
</template>

<script>
  import topNav from '@/components/top-nav/top-nav.vue'
  import {loginByMobile,sendRegisterOrLoginCaptcha} from '@/api/login.js'
  export default {
    components:{
      topNav
    },
    data(){
      return {
        value3:'',
        phone:'',
        count:60
      }
    },
    onLoad(e) {
      this.phone = e.tel
      this.Countdown()
      console.log(e.tel,'123');
      // 一进入页面，然后发送请求，获取到验证码
      sendRegisterOrLoginCaptcha({
        mobile: e.tel
      })
    },  
    filters:{
      formatPhone(value) {
        return value.substr(0,3) + ' ' + value.substr(3,4) + ' ' + value.substr(7) 
      }
    },
    watch:{
      value3(newV,oldV) {
        console.log(newV,oldV,'values');
      }
    },
    methods:{
      // 进行倒计时
      Countdown() {
        console.log(123);
        var timer = setInterval(()=>{
          this.count--;
          if(this.count == 0) {
            clearTimeout(timer)
          }
        },1000)
      },
      async finishInput(e) {
        var data = await loginByMobile({
          mobile: this.phone,
          captcha: e
        })
        console.log(data);
      }
    }
  }
</script>

<style>
.code{
	width: 100vw;
	height: 100vh;
	background: rgba(255,255,255,0.39);
}
.code-main{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top:163rpx;
	padding-left:62rpx;
	padding-right: 62rpx;
}
.code-msg{
	font-size: 56rpx;
	font-weight: bold;
	color: #343234;
}
.code-time{
	display: flex;
	align-items: center;
	justify-content:space-between;
	width: 100%;
	padding-top:33rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #343234;
	opacity: 0.53;
}
.code-num{
	display: flex;
	justify-content: center;
	width: 100%;
	padding-top:83rpx;
}
</style>